import { socialUserTagModel } from '@/models/socialUserTag'
import { SocialUserVO } from '@/services/SocialUserService'
import { DeleteOutlined, EditOutlined } from '@ant-design/icons'

import { Avatar, Button, Divider, Drawer, List, Skeleton, Space } from 'antd'
import ButtonGroup from 'antd/es/button/button-group'
import { observer } from 'mobx-react-lite'
import InfiniteScroll from 'react-infinite-scroll-component'
import styled from 'styled-components'

const ScrollContainer = styled.div`
  height: 100%;
  overflow: auto;
`
const TagDrawer = () => {
  let { currentTag: tag, currentTagSocialUserList: userData } = socialUserTagModel
  const handleCreateBtn = () => {
    socialUserTagModel.updateTag(tag)
  }

  const ExtraAction = () => {
    return (
      <Space>
        <ButtonGroup>
          <Button onClick={handleCreateBtn} icon={<EditOutlined />} ghost type={'primary'} />
          <Button onClick={handleCreateBtn} icon={<DeleteOutlined />} danger />
        </ButtonGroup>
      </Space>
    )
  }
  return (
    <Drawer
      title={tag?.tagName}
      extra={<ExtraAction />}
      open={socialUserTagModel.tagDrawerState}
      onClose={socialUserTagModel.closeDrawer}
    >
      <ScrollContainer id="scrollable-div">
        <InfiniteScroll
          next={socialUserTagModel.nextPage}
          hasMore={socialUserTagModel.socialUserCurrentPage < socialUserTagModel.socialUserPages}
          loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
          dataLength={userData.length}
          endMessage={<Divider>就只有这么点人了😊</Divider>}
          scrollableTarget="scrollable-div"
        >
          <List
            dataSource={userData}
            renderItem={(item: SocialUserVO) => (
              <List.Item key={item.id}>
                <List.Item.Meta
                  avatar={<Avatar src={item.avatar} />}
                  title={item.nickname || '微信用户'}
                  description={item.openid}
                />
              </List.Item>
            )}
          ></List>
        </InfiniteScroll>
      </ScrollContainer>
    </Drawer>
  )
}

export default observer(TagDrawer)
